<?php
	header("Content-type: application/x-javascript");
?>

Ext.define('AmpleHarvest.GUI.component.filter.cComponent',
{
	extend				: 'Ext.container.Container',
	alias				: 'widget.metricsviewer-view-grids-filtercomponent',

	constructor			: function(config)
	{
		var filterCmp = this,
			items = filterCmp.items,
			allItems = [], listeners, i;

		listeners =
		{
			triggerHide		: function(field)
			{
				filterCmp.hideTrigger(field.getRawValue().length === 0);
			},

			change			: function(field, newValue)
			{
				filterCmp.hideTrigger(newValue.length === 0);
				field.getEl().down('input')[newValue.length === 0
						? 'removeCls'
						: 'addCls']('filtered-value');
			},

			keydown			: function(field, e)
			{
				var key = Ext.EventObject.getKey();
				if (key === 13)
				{
					filterCmp.submitSearch();
				}
			},

			filterRender	: function(field)
			{
				var tooltip = new Ext.ToolTip(
				{
					width		: 300,
					target		: field.getEl(),
					trackMouse	: true,
					renderTo	: Ext.getBody(),
					html		: 'Use asterisk (*) to perform wildcard matches. <br>'
							+ 'Note: For a "contains" search, use a wildcard on both ends of the search term.  '
							+ '(eg. *Documents* would return anything cotaining "Documents")  '
							+ 'Click the "x" to clear the filter.'
				}
				);

				listeners.change(field, field.getValue());
			},

			onTriggerClick	: function(e)
			{
				filterCmp.clearFilterValues();
				filterCmp.submitSearch();
			},

			clearValue		: function()
			{
				var field = filterCmp.getFilterField();
				field.setValue('');
				fields.fireEvent('change', field, '');
			}
		};

		if (items)
		{
			for (i = 0; i < items.length; i++)
			{
				allItems.splice(allItems.length, 0, items[i]);
			}
		}
		else
		{
			filterCmp.items = [];
		}

		allItems.splice(allItems.length, 0,
				[
						{
							xtype			: 'trigger',
							triggerCls		: 'x-form-clear-trigger',
							emptyText		: this.emptyText || 'Filter ...',
							hideTrigger		: false,
							width			: 140,
							value			: this.defaultValue || '',
							enableKeyEvents	: true,
							onTriggerClick	: Ext.Function.bind(
									listeners.onTriggerClick, this
							),
							clearValue		: Ext.Function.bind(
									listeners.clearValue, this
							),
							listeners		:
							{
								change	: Ext.Function.bind(listeners.change,
										this
								),
								keyup	: Ext.Function.bind(
										listeners.triggerHide, this
								),
								keydown	: Ext.Function.bind(listeners.keydown,
										this
								),
								render	: Ext.Function.bind(
										listeners.filterRender, this
								)
							}
						},
						{
							xtype	: 'tbspacer',
							width	: 4
						},
						Ext.create(
								'AmpleHarvest.GUI.component.filter.cSelector',
								{
									hidden		: this.hideColumnFilter || false,
									ignoreCols	: this.ignoreCols
								}
						),
						{
							xtype	: 'tbspacer',
							width	: 4
						},
						{
							xtype	: 'button',
							iconCls	: 'magnifier',
							tooltip	: 'Apply Filter',
							handler	: function(button)
							{
								filterCmp.submitSearch();
							}
						}
				]
		);

		Ext.apply(filterCmp.items, allItems);

		filterCmp.callParent(arguments);

	},

	layout				:
	{
		type	: 'hbox'
	},

	style				: 'background-color:#dfe9f6; padding-top:3px; padding-left:3px;',

	itemCls				: Ext.baseCSSPrefix + 'toolbar-item',

	width				: '100%',
	defaults			:
	{
		scale	: 'small'
	},

	listeners			:
	{
		render	: function(button)
		{
			this.getGrid().getStore().on('beforeload', this.beforeLoad, this);
			this.getGrid().mon(this.getGrid(), 'reconfigure', this.reconfigure,
					this
			);
		}
	},

	getFilterField		: function()
	{
		return this.down('field');
	},

	getFilterMenu		: function()
	{
		return this.down('metricsviewer-view-grids-filterselector');
	},

	getGrid				: function()
	{
		if (!this.grid)
		{
			this.grid = this.up('gridpanel');
		}
		return this.grid;
	},

	submitSearch		: function()
	{
		var field = this.getFilterField(),
			value = field.getValue();
		this.hideTrigger(value.length === 0);
		field.getEl()[value.length === 0 ? 'removeCls' : 'addCls']('filtered-view');

		if (!Ext.isEmpty(value))
		{
			if (value.replace(/\*/g, '').length === 0)
			{
				Ext.Msg.alert('Alert',
						'You must have some characters other than wildcards in your search.'
				);
				return;
			}
		}
		this.actionHandler.call(this.scope || this.getGrid(), this.getGrid(),
				this.getFilterField()
		);
	},

	reconfigure			: function(grid)
	{
		grid.getStore().on('beforeload', this.beforeLoad, this);
	},

	beforeLoad			: function()
	{
		var filterValue = this.getFilterField().getValue();
		Ext.apply(this.getGrid().getStore().proxy.extraParams,
				{
					filterValue	: filterValue
				});
	},

	clearFilterValues	: function()
	{
		var filterCmp = this,
			field = filterCmp.getFilterField();
		field.setValue('');
	},

	// the trigger hiding wass not working well in 4.0.0 but seems to be ok in
	// 4.0.7
	hideTrigger			: function(hide)
	{
		this.getFilterField().setHideTrigger(hide);
		this.doLayout();
	},

	// default implementation of the actionHandler. Can be overridden.
	actionHandler		: function(grid, filterField)
	{
		Ext.apply(grid.getStore().proxy.extraParams,
				{
					filterValue	: filterField.getValue()
				});

		grid.getStore().load();
	}

}
);
